<template>
  <q-page class="row  justify-evenly">
    <article-list :articles="articles" @pageChange="pageChange"></article-list>
  </q-page>
</template>

<script lang="ts">
import ExampleComponent from 'components/ClassComponent.vue';
import { Vue, Component, Watch } from 'vue-property-decorator';
import articleList from 'src/components/article/list.vue';
@Component({
  components: { ExampleComponent, articleList },
  mounted() {
    this.handleCategoryChanged(this.$route.params.value);
  }
})
export default class CategoryPost extends Vue {
  get articles(): Array<any> {
    return this.$store.state.article.articlesByCategory.data;
  }

  get pagination(): any {
    var a = this.$store.state.article.articlesByCategory.pagination;
    console.log('pagesize', a);
    return this.$store.state.article.articlesByCategory.pagination;
  }
  //分页点击回调
  public async pageChange(page: number) {
    var param = {
      page: page,
      pageSize: this.pagination.pageSize,
      category: this.$route.params.value
    };
    await this.$store.dispatch('article/ListByCategory', param);
  }

  get category() {
    return this.$route.params.value;
  }
  @Watch('category')
  handleCategoryChanged(category) {
    this.$nextTick(() => {
      this.$store.dispatch('article/ListByCategory', {
        category
      });
      this.$store.dispatch('headerCover/Init', {
        visible: true,
        bgImg:
          'https://tva4.sinaimg.cn/large/0084aYsLly1ge7bivvvswj31hc0u078j.jpg',
        title: category,
        showArrow: false
      });
    });
  }
}
</script>
